<!DOCTYPE html>
<html lang="zh">
<head title="">
    <meta charset='utf-8'/>
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <script src='../assets/mapbox-gl-dev.js'></script>
    <link href='../assets/mapbox-gl.css' rel='stylesheet'/>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<div id='map'></div>
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFvcmV5IiwiYSI6ImNqNWhrenIwcDFvbXUyd3I2bTJxYzZ4em8ifQ.KHZIehQuWW9AsMaGtATdwA';
    var videoStyle = {
        "version": 8,
        "sources": {
            "satellite": {
                "type": "raster",
                "url": "mapbox://mapbox.satellite",
                "tileSize": 256
            },
            "video": {
                "type": "video",
                "urls": ["https://www.mapbox.com/drone/video/drone.mp4", "https://www.mapbox.com/drone/video/drone.webm"],
                "coordinates": [
                    [-122.51596391201019, 37.56238816766053],
                    [-122.51467645168304, 37.56410183312965],
                    [-122.51309394836426, 37.563391708549425],
                    [-122.51423120498657, 37.56161849366671]
                ]
            }
        },
        "layers": [{
            "id": "background",
            "type": "background",
            "paint": {
                "background-color": "rgb(4,7,14)"
            }
        }, {
            "id": "satellite",
            "type": "raster",
            "source": "satellite"
        }, {
            "id": "video",
            "type": "raster",
            "source": "video"
        }]
    };

    var map = new mapboxgl.Map({
        container: 'map',
        minZoom: 14,
        zoom: 17,
        center: [-122.514426, 37.562984],
        bearing: -96,
        style: videoStyle,
        hash: false
    });
    map.addControl(new mapboxgl.GeolocateControl);
    map.addControl(new mapboxgl.FullscreenControl);
    map.addControl(new mapboxgl.NavigationControl);
    map.addControl(new mapboxgl.ScaleControl);
</script>

</body>
</html>